/**
* @description: 我的
* @author: JiWei
* @date:
**/
<template>
  <view class="mine-home">
    <view class="top-mine">
      <view class="left-img">
        <img src="../../static/img/autaor.png" alt="">
      </view>
      <view class="right-user">
        <text class="user-title">{{user}}</text>
        <text class="user-phone">{{phone}}</text>
      </view>
    </view>
    <view class="main-container">
      <van-cell-group class="clear-cache">
        <van-field v-for="(item,key) in options"
					:key="key"
                   :label="item.title"
                   readonly
                   input-align="right"
                   right-icon="arrow"
                   @click="toSub(item.url)" />
      </van-cell-group>
    </view>
    <tabBar :current="bottomTab" :list="list"></tabBar>
  </view>
</template>
<script>
import tabBar from '../../components/common/tabBar'
import {mapGetters} from "vuex";
export default {
  name: 'mine',
  components: { tabBar },
  props: {},
  data() {
    return {
      bottomTab: 1,
      list:[
        {
          text: "首页", // 页面标题
          icon: require("../../static/img/noSelectHome.png"), //未选中图标
          icon_a: require("../../static/img/selectHome.png"), //选中图片
          path: "/pages/index/index",
        },
        {
          text: "我的",
          icon: require("../../static/img/noSelectMine.png"),
          icon_a: require("../../static/img/selectMine.png"),
          path: "/pages/mine/mine",
        },
      ],
      options: [
        {
          title: "个人档案",
          url: "/pages/mine/personalInfo"
        },
        {
          title: "系统设置",
          url: "/pages/mine/systemSettings"
        }
      ],
      user:'',
      phone: ''
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  onLoad() {
    this.getLoinUser()
  },
  methods: {
    toSub(url) {
      uni.navigateTo({url: url});
    },
    getLoinUser() {
      const params = {
        account: this.userData.account
        // account: 'sx_jiwei'
      }
      this.$api.getLoginUserInfo(params).then(res => {
        this.user = res.data.userName
        this.phone = res.data.phone
      })
    }
  }
};
</script>
<style scoped lang="scss">
.mine-home {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .top-mine {
    width: 100vw;
    height: px2vh(283);
    background: #417ADC;
    padding-top: px2vh(120);
    color: #fff;
    .left-img {
      width: px2vw(200);
      height: px2vw(200);
      float: left;
      margin-left: px2vw(68);
      img {
        width: px2vw(200);
        height: px2vw(200);
      }
    }
    .right-user {
      width: px2vw(500);
      height: px2vh(170);
      margin-top: px2vh(30);
      margin-left: px2vw(62);
      float: left;
      .user-title {
        display: inline-block;
        width: 100%;
        font-size: px2vw(54);
        margin-bottom: px2vh(46);
      }
      .user-phone {
        font-size: px2vw(36);
      }
    }
  }
}
</style>